Polyfill 是一块代码（通常是 Web 上的 JavaScript），
用来为旧浏览器提供它没有原生支持的较新的功能
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码
有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程
中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没
有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，
例如IE9根本看不懂代码写的let和const是什么东西？只能选
择报错，这就是浏览器对ES6的兼容性问题.

Babel-polyfill可以抹去旧版本浏览器不熟悉的特征，

@vue/babel-preset-app
一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，
它通过 @babel/preset-env和 browserslist 配置来决定
项目需要的 polyfill。
默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，
这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。
这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果
其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来

如果有依赖需要 polyfill，你有几种选择

1.如果该依赖基于一个目标环境不支持的 ES 版本撰写: 
将其添加到 vue.config.js 中的 transpileDependencies 选项。
这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

2.如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill:
你可以使用 @vue/babel-preset-app 的 polyfills 选项预包含
所需要的 polyfill。注意 es.promise 将被默认包含，因为现在
的库依赖 Promise 是非常普遍的
// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es.promise',
        'es.symbol'
      ]
    }]
  ],
  'env': {
    'development': {
      ///babel plugin dynamic import node plugin只做一件事：将所有import（）转换为require（）
      // 当您有大量页面时，此插件可以显著提高热更新的速度。
      'plugins': ['dynamic-import-node']
    }
  }
}
这种方式添加 polyfill,polyfill 在 browserslist 的目标中不需要，
则它会被自动排除.,节省性能,推荐.

3如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要
的 polyfill (例如 Vuetify)：请使用 useBuiltIns: 'entry' 然后在
入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。
这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心
依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所
以最终的包大小可能会增加。
//.babelrc.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry"
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};
//main.js
import "core-js/stable";
import "regenerator-runtime/runtime";